<template>
  <view>
    <uni-card>
      <uni-row class="demo-uni-row" :width="nvueWidth">
        <uni-col :span="4">
          <view class="demo-uni-col dark">
            <image src="../../static/time.png" style="width: 38px; height: 38px;align-items: center"></image>
          </view>
        </uni-col>
        <uni-col :span="20">
          <view class="demo-uni-col light">
            <text class="yuyue-title">预约入园时间</text><br>
            <text class="yuyue-time">2024年9月{{day}}日  {{period}}  </text>
          </view>
        </uni-col>
      </uni-row>
    </uni-card>
    <text class="title">主预约人</text>
    <uni-card >
        <uni-forms ref="baseForm" :modelValue="mainarr" label-position="top">
          <uni-forms-item label="姓名" required>
            <uni-easyinput v-model="mainarr.name" placeholder="请输入预约人姓名" />
          </uni-forms-item>
          <uni-forms-item label="证件类型" required >
            <uni-data-select v-model="mainarr.choice" :localdata="choice" ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="证件号码" required>
            <uni-easyinput v-model="mainarr.num" placeholder="请输入证件号码" />
          </uni-forms-item>
          <uni-forms-item label="手机号码" required>
            <uni-easyinput v-model="mainarr.phone" placeholder="请输入手机号码" />
        </uni-forms-item>
        <checkbox-group>
          <label>
            <checkbox class="box1" value="cb" color="#fff"  activeBackgroundColor="#8DCB6D" style="transform:scale(0.7)" />同行人有6周岁（含）以下货身高1.2米（含）以下儿童，只需选择儿童数。
          </label>
        </checkbox-group>
        <view class="numbox">
          <uni-data-checkbox class="box2" v-model="value" selected-color="#F1FAEC" selected-text-color="#323232" s :localdata="cnum" mode="tag"/>
        </view>
      </uni-forms>
    </uni-card>
    <view v-for="(item,index) in arr" style="margin-top: 20px;">
      <text class="title">同行人{{index+1}}</text>
      <image class="image-delete" @click="delPeople(index)" src="../../static/delete.png"></image>
      <uni-card style="top: 5px;">
        <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
          <uni-forms-item label="姓名" required>
            <uni-easyinput v-model="arr[index].name" placeholder="请输入预约人姓名" />
          </uni-forms-item>
          <uni-forms-item label="证件类型" required >
            <uni-data-select v-model="arr[index].choice" :localdata="choice" ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="证件号码" required>
            <uni-easyinput v-model="arr[index].num" placeholder="请输入证件号码" />
          </uni-forms-item>
          <uni-forms-item label="手机号码" required>
            <uni-easyinput v-model="arr[index].phone" placeholder="请输入手机号码" />
          </uni-forms-item>
        </uni-forms>
      </uni-card>
    </view>
    <button class="addpeople" @click="addPeople" style="top: -10px;" >
      <image src="../../static/add.png" style="width: 12px; height: 12px;align-items: center;"></image>
      <text class="addpeople-text" > 添加同行人 </text>
    </button>
    <view class="mes">
      <image class="image-warn" src="../../static/warn.png"></image>
      最多可预约成人4人，儿童3人
    </view>
    <button class="sumbit" @click="jump()">
      <text class="sub-text">提交预约</text></button>

  </view>
</template>

<script setup>
import {ref} from 'vue'
let index=ref(0);
let choice=ref([{
  text:"中国居民身份证",
  value:0
},{
  text:"军人身份证件",
  value:1
},
  {
    text:"港澳台居民居住证",
    value:2
  }
])
let cnum=ref([{
  value: 0, text: "1人"
},{
  value: 1, text: "2人"
},{
  value: 2, text: "3人"
}])
let mainarr=ref({
  name:'',
  choice:[0],
  num:"",
  phone:"",
  cnum:[],
  arr:[]
})
let arr =ref([{
  name:'',
  choice:[0],
  num:"",
  phone:"",
}])
let addPeople=function(){
  arr.value.push({
    name:'',
    choice:[0],
    num:"",
    phone:"",
  })
}
let delPeople=function(index){
  arr.value.splice(index,1)
}
function jump(){
  uni.navigateTo({
    url:'/pages/apointment/success'
  })
}
let day =sessionStorage.getItem("day")
let period = sessionStorage.getItem("period")
</script>

<style>
.uni-data-checklist .checklist-group .checklist-box.is--tag[data-v-2f788efd] {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px #DCDFE6 solid;
  border-radius: 20px;
  background-color: #f5f5f5;
}
.form{
  color: #05261b;
  font-size: 15px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.yuyue-title{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  letter-spacing: 0;
}
.yuyue-time{
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.title{
  margin: 15px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.box1{

  opacity: 0.75;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #323232;
  letter-spacing: 0;
}
.numbox{
  width: 160px;
  margin-left: 178px;
}
/* .box2{
  radius: 20px;
  border-radius: 20px;
} */
.addpeople{
  width: 94%;     /* 按钮的宽度，根据需要调整 */
  text-align: center;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #8DCB6D;
  border-radius: 12px;
  border-style: dashed;
}
.add{
  width: 16px;
  height: 16px;
  opacity: 0;
  background: #000000;
}
.addpeople-text{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #323232;
  letter-spacing: 0;
  text-align: center;
  margin-top: 20px;
  margin-bottom:10px;

}
.image-warn{
  width: 12px;
  height: 12px;
  margin-bottom: -2px;
}
.image-delete{
  width: 16px;
  height: 16px;
  margin-left: 340px;
  z-index: 99;
  top: 2px;
}
.mes{
  opacity: 0.75;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #323232;
  letter-spacing: 0;
  margin: 15px;
}
.sumbit{
  position: bottom;  /* 固定定位 */
  bottom: 0;        /* 底部对齐 */
  left: 46%;        /* 水平居中 */
  transform: translateX(-50%);
  width: 93%;     /* 按钮的宽度，根据需要调整 */
  text-align: center;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
}
.sub-text{
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: 0;
}

</style>